<template>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map id="myMap" style="width: 100%; height:40vh;" :latitude="latitude" :longitude="longitude" :markers="markers" 
			show-location enable-scroll :scale="scale" :show-scale="true"
			@callouttap="callouttap" 
			@regionchange="regionchange" 
			@updated="updated">
			
			<cover-view style="opacity: 0.8;background-color: white;border-radius:8px;padding:3px;position: absolute;right: 25rpx;bottom:25rpx;" @tap="goCenter()">
				<cover-image src="/static/icon/position.png"></cover-image>
			</cover-view>
			
        </map>
      </view>
    </view>
</template>

<script>
import * as auth from '@/common/authorize.js'
export default {
  props: {
    storeData: {
      type: Array,
      default: []
    },
    markers: {
      type: Array,
      default: []
    },
	selectPoint: {
	  type: Object,
	  default: {}
	}
  },
  data() {
    return {
      store: {},
      distanceL: 0, //附近店门的距离
      latitude: 40.12,
      longitude: 115.68,
	  scale:16,
	  center:{},//中心点
      controls: []
    }
  },
  watch:{
	  selectPoint:function(np,op){
		  if(np.latitude!=null&&np.longitude!=null){
			  var mapCtx = wx.createMapContext("myMap", this)
			  if(np.scale>0){
				  this.scale=np.scale
			  }
			  mapCtx.moveToLocation(np)
		  }
	  }
  },
  methods: {
    // 点击气泡
    callouttap(e) {
      for (let i = 0; i < this.storeData.length; i++) {
        const ele = this.storeData[i]
        if (ele.id == e.markerId) {
          this.store = ele
		  this.$emit('showdetail',ele)
          break
        }
      }
    },
	//设置当前位置点
	setGpsData(gps){
		this.center=gps
		this.latitude = gps.latitude
		this.longitude = gps.longitude
		if(this.markers.length>0){
			this.nearDistance(this.markers[0],this.latitude,this.longitude)
		}
	},
	//返回中心点
	goCenter(){
		this.latitude = this.center.latitude
		this.longitude = this.center.longitude
		this.scale=16
		var mapCtx = wx.createMapContext("myMap", this)
		mapCtx.moveToLocation(this.center)
	},
	//地图更新时执行
    updated() {
		let _this = this
		if(this.$store.getters.hasGps){
			  let gps=_this.$store.getters.loadGps
			  _this.setGpsData(gps)
		}else{
			  wx.getLocation({
				type: "gcj02", //返回可以用于wx.openLocation的经纬度
				success: function(res) {
				  _this.setGpsData(res)
				  _this.$store.commit("SET_GPS",res)
				},
				fail: function(res) {
				  console.log(res)
				}
			  })
		}
    },
    // 改变视野时改变经纬度
    regionchange(e) {
      let _this = this
      // 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
      var mapCtx = wx.createMapContext("myMap", this)
      mapCtx.getCenterLocation({
        success: function(res) {
          _this.centerLatitude = res.latitude
          _this.centerLongitude = res.longitude
        },
        fail: function(res) {
          console.log(res)
        }
      }) //获取当前地图的中心经纬度
    },
    // 两点间距离
    distance(la1, lo1, la2, lo2) {
      var La1 = (la1 * Math.PI) / 180.0
      var La2 = (la2 * Math.PI) / 180.0
      var La3 = La1 - La2
      var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(La3 / 2), 2) +
              Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
          )
        )
      s = s * 6378.137 //地球半径
      s = Math.round(s * 10000) / 10000
      return s
    },
    // 计算最近的距离
    nearDistance(point, centerLatitude, centerLongitude) {
		let dist = this.distance(
		  point.latitude,
		  point.longitude,
		  centerLatitude,
		  centerLongitude
		)
		this.distanceL = (parseInt(dist*100)/100).toFixed(2)
		this.$emit("changeNear",this.distanceL)
    }
  },
  onShow() {},
  onReady() {}
}
</script>

<style lang="scss" scoped>
.page-body{
	position: relative;
}
.content {
  text-align: center;
  height: 400rpx;
}
.page-section {
  z-index: 0;
}
.store-tips {
  width: 600rpx;
  height: 100rpx;
  margin: 10rpx auto;
  border-radius: 10rpx;
  position: absolute;
  top: 10rpx;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  overflow: hidden;
  .store-des-box {
    background: #fff;
  }
  .store-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    margin: 10rpx;
    float: left;
  }
  .store-des {
    padding-top: 8rpx;
    float: left;
    line-height: 1;
    font-size: 22rpx;
    color: #666;
    padding-left: 20rpx;
    .store-name {
      font-weight: 600;
      color: deeppink;
    }
  }
  .store-clear {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    top: 7rpx;
    right: 7rpx;
    margin: 30rpx;
  }
}
.address-icon {
  width: 38rpx;
  height: 40rpx;
  position: absolute;
  top: 22%;
  left: 50%;
  z-index: 2;
  margin-bottom: -20rpx;
  margin-left: -20rpx;
}
.near-num {
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  z-index: 2;
  font-size: 24rpx;
  background: #fff;
  transform: translate(-50%, 0);
}
.near-home {
  position: absolute;
  bottom: 10px;
  right: 0px;
  z-index: 2;
  font-size: 25px;
  transform: translate(-50%, 0);
}
</style>
